import { Component, ViewChild, Renderer2, Renderer } from '@angular/core';
import {
  IonicPage,
  NavController,
  NavParams,
  ToastController
} from 'ionic-angular';
import { BaseUI } from '../../../common/baseUI';
import { ComSeriveProvider } from '../../../providers/com-serive/com-serive';
import { LinergradientServiceProvider } from '../../../providers/linergradient-service/linergradient-service';

@IonicPage()
@Component({
  selector: 'page-register',
  templateUrl: 'register.html'
})
export class RegisterPage extends BaseUI {
  isShow: Boolean = true; //判断是否显示倒计时
  count: number = 60; // 倒计时时间
  timer: any = null; // 定时器的名称
  phone: any = ""; // 双向绑定手机号码
  code = ''; // 正常验证码
  toastCount = 0;
  password: string = '';
  isEye: boolean = true;
  $status: number;
  isRegister: boolean = true;
  AllZeroCode: string; // 字符串型的验证码

  gradename = [];
  majorname = [];
  classesname = [];
  dependentColumns = [];
  @ViewChild('input') input;

  // 存储的号码
  phones = "";
  // 存储的验证码
  codes = '';
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public toastCtrl: ToastController,
    public comSerive: ComSeriveProvider,
    public lgService: LinergradientServiceProvider,
    public render: Renderer
  ) {
    super();
  }

  ionViewDidLoad() {
    
  }
 
  // rep($event){ 
  //   //删除键
  //   if($event.keyCode == 8 && this.phone.length == 0){
  //     this.phone = this.phones = "";
  //     return;
  //   }
  //   //通过phone保存值的改变 来判断用户是否输入非法字符
  //   //输入非法字符后input的值会突然为空
  //   if(this.phone != ""){
  //     this.phones = this.phone;
  //   }else{
  //     this.phone = this.phones == "" ? "中文触发number" : this.phones;
  //   }
  //   this.phone = this.phone.replace(/[eE]/, '');
  // }

  setCode() {
    const reg = /^1[34578][0-9]{9}$/;
    if (reg.test(this.phone)) {
      this.comSerive.registerCode(this.phone).subscribe(data => {
        if (data['status'] === 200) {
          this.isShow = false;
          this.isRegister = false;
          this.setTiem();
        } else {
          this.isShowToast('发送次数已达到上限');
        }
      });
    }
  }

  // 设计定时器
  setTiem() {
    clearInterval(this.timer);
    this.timer = setInterval(() => {
      this.count--;
      if (this.count === 0) {
        this.count = 60;
        this.isShow = true;
        clearInterval(this.timer);
      }
    }, 1000);
  }

  // 进入完成注册页面
  gotoUpDataInfo() {

    const reg = /^1[34578][0-9]{9}$/;
    if (reg.test(this.phone)) {
      this.comSerive.checkPhoneInfo(this.phone).subscribe(data => {
        if (data['status'] === 200) {
          this.isRegister = false;
        } else {
          this.isShowToast('账号已注册');
          this.isRegister = true;
          return ;
        }
      });
    }

    // json数据获取手机号密码
    const user = { phone: this.phone, password: this.password };

    if (reg.test(this.phone)) {
      // 如果验证码前缀是0 会自动省略
      if ((this.code + '').length === 5) {
        this.AllZeroCode = '0' + this.code;
      } else if ((this.code + '').length === 6) {
        this.AllZeroCode = this.code.toString();
      }
      var stringverification = JSON.stringify({
        verification: this.AllZeroCode,
        phoneNumber: this.phone
      });
    } else if(!reg.test(this.phone)){
      return this.isShowToast('请填写正确手机号');
    }
    if ((this.code + '').length === 5 || (this.code + '').length === 6) {
      this.comSerive.checkCode(stringverification).subscribe(data => {
        if (data['status'] === 200) {
          if (this.password.length >= 8 && this.password.length <= 16) {
            this.navCtrl.push('UpdataInfoPage', user);
          } else if (this.password.length < 8) {
            this.isShowToast('密码长度需要大于8位');
          } else if (this.password.length > 16) {
            this.isShowToast('密码长度需要小于16位');
          } else {
            this.isShowToast('密码不能为空');
          }
        } else if (this.code === undefined || this.code === null) {
          this.isShowToast('验证码不能为空');
        } else {
          this.isShowToast('验证码错误');
        }
      });
    } else {
      this.isShowToast('请填写正确的验证码');
    }

  }

  keyup() {
    const reg = /^1[34578][0-9]{9}$/;
    if (reg.test(this.phone)) {
      this.comSerive.checkPhoneInfo(this.phone).subscribe(data => {
        if (data['status'] === 200) {
          this.isRegister = false;
        } else {
          this.isShowToast('账号已注册');
          this.isRegister = true;
        }
      });
    }
  }

  // 限制重复弹窗
  isShowToast(message) {
    if (this.toastCount === 0) {
      this.showToast(this.toastCtrl, message);
      this.toastCount++;
      setTimeout(() => {
        this.toastCount = 0; 
      }, 3000); 
    }
  }

  // 限制密码输入中文
  passwordReplace($event){
    this.password = this.password.replace(/[^    -}]/ig, '');
  }

  rep($event){ 
    //删除键
    if($event.keyCode == 8 && this.phone.length == 0){
      this.phone = this.phones = "";
      return; 
    }
    //通过phone保存值的改变 来判断用户是否输入非法字符
    //输入非法字符后input的值会突然为空
    if(this.phone != ""){
      this.phones = this.phone;
    }else{
      this.phone = this.phones == "" ? "中文触发number" : this.phones;
    }
    this.phone = this.phone.replace(/[eE\.]/, '');
    // console.log(this.phone);
    if(this.phone.length>11) this.phone=this.phone.slice(0,11)
    this.keyup();
  } 

  codeNum($event) {
        //删除键
        if($event.keyCode == 8 && this.code.length == 0){
          this.code = this.codes = "";
          return; 
        }
        //通过phone保存值的改变 来判断用户是否输入非法字符
        //输入非法字符后input的值会突然为空
        if(this.code != ""){
          this.codes = this.code;
        }else{
          this.code = this.codes == "" ? "中文触发number" : this.codes;
        }
        this.code = this.code.replace(/[eE\.]/, '');
        // console.log(this.phone);
        if(this.code.length>6) this.code=this.code.slice(0,6)
  }


  // 是否显示密码
  isShowPassword() {
    this.isEye = !this.isEye;
  }

  gotoLogin() {
    this.navCtrl.push('LoginPage');
  }


  pop() {
    this.navCtrl.pop();
  } 
}
